@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.20

package/src/components/Pill/Pill.mdx

@@ -1,41 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-
-import { Preview } from '../../styleguide/';
-import Icon from '../Icon';
-
-import Pill from './Pill';
-
-# Pill
-
-Put numbers in it.
-
-<Preview>
-  <Pill>1</Pill>
-</Preview>
-
-## Sizes
-
-Pill size is determined by font size inherited from ancestor elements.
-
-<Preview>
-  <h1>This many: <Pill>1</Pill></h1>
-  <h2>I have more: <Pill>2</Pill></h2>
-  <p><Pill className="large">3</Pill></p>
-  <p>Max 3 digits please. <Pill>123</Pill></p>
-</Preview>
-
-## Matching size with icons
-
-While pill size is determined by typography, [icons have fixes sizes](/components/icon#sizes), icon images usually contain a bit of whitespace around the paths themselves. This makes it nearly impossible to match icon and pill sizes, especially when the icon path has an oval shape.
-
-In case there is no way to alter the design, you might want to reuse icon sizing classes. Note that due to whitespace in the icon, the sizes will never match perfectly. Some icons work better than others. Icons with circular shape don't work well, as the size difference becomes more apparent.
-
-<Preview>
-  <Pill className="icon--large">1</Pill>{' '}<Icon name="fast_delivery" size="large" />
-  <br /><br />
-  <Pill className="icon--large">2</Pill>{' '}<Icon name="funny" size="large" />
-</Preview>
-
-## Props
-
-<ComponentDocs title="<Pill />" component={Pill} />

package/src/components/Progress/Progress.mdx

@@ -1,119 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import Preview from '../../styleguide/Preview';
-
-import Progress from './';
-import Bar, { BarItem } from '../Bar';
-import Icon from '../Icon';
-import { InfoTooltip } from '../Tooltip';
-
-# Progress
-
-Horizontal indicator of a task progress or scalar value.
-
-## Label and value
-
-Authors are required to provide a clear, explanatory Label and textual Value to ensure all users can access the displayed information.
-
-<Preview>
-  <Progress
-    label="Zdieľanie dát: zostavajuce predplatené"
-    value="4.1 GB / 7.9 GB"
-    width={0.8}
-  />
-</Preview>
-
-## Variants
-
-<Preview>
-  {['orange', 'green', 'red', 'blue', 'yellow'].map(color => {
-    const randomWidth = Math.round(Math.random() * 10000) / 10000;
-    return (
-      <Progress
-        label="Example label"
-        key={color}
-        color={color}
-        width={randomWidth}
-        value={`${randomWidth} / 1`}
-      />
-    );
-  })}
-</Preview>
-
-## Complex description of Progress bar
-
-<Preview>
-  <Progress
-    label={
-      <Bar className="justify-content-space-between mb-none" space="small">
-        <BarItem canShrink>
-          <Bar align="start" className="mb-none" space="small" canWrap={false}>
-            <BarItem>
-              <Icon name="data-traffic" />
-            </BarItem>
-            <BarItem canShrink>
-              <p className="text-nowrap mb-none">
-                <span className="text-wrap">Label with icon and tooltip</span>
-                &nbsp;
-                <InfoTooltip>
-                  Tooltip should always be next to label, so we use combination
-                  of .text-nowrap and .text-wrap classes.
-                </InfoTooltip>
-              </p>
-            </BarItem>
-          </Bar>
-        </BarItem>
-        <BarItem>
-          <Bar className="mb-none" space="small">
-            <BarItem>
-              <p className="reset-font-weight mb-none">breaks to left</p>
-            </BarItem>
-            <BarItem>
-              <Icon color="danger" name="error-severe" size="medium" />
-            </BarItem>
-          </Bar>
-        </BarItem>
-      </Bar>
-    }
-    color="red"
-    width={0.4}
-    value={
-      <>
-        <p className="mb-small">
-          <span className="reset-font-weight">Avaible:</span> 4
-          <span className="reset-font-weight"> / 8 GB</span>
-        </p>
-        <Bar align="start" className="mb-none" space="small" canWrap={false}>
-          <BarItem>
-            <Icon name="info" />
-          </BarItem>
-          <BarItem canShrink>
-            <p className="mb-none">
-              <span className="reset-font-weight">
-                Yes we need to use another bar element in label, so icon and
-                text stays on same line. Also this text in
-              </span>{' '}
-              paragraph{' '}
-              <span className="reset-font-weight">
-                {' '}
-                so it has set max-width. If you have label with longer text, you
-                should also use paragraph in there. And one last last think - yes
-                we need to have that many bars in label, so the text doesnt break
-                to newline without icon.
-              </span>
-            </p>
-          </BarItem>
-        </Bar>
-      </>
-    }
-  />
-</Preview>
-
-## Accessibility
-
-Progress component can be used with `role="progressbar"` when it's needed to "indicate that the user's request has been received and the application is making progress toward completing the requested action." [role="progressbar"](https://www.w3.org/TR/wai-aria-1.1/#progressbar).
-
-It's not recommended to use `role="meter"` when the component should represent a scalar value as it's screenreader support is poor.
-
-Since label and textual value are required when using this component, all relevant infomation is provided in an understandable way, not relying on visual representation only. [Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.](https://www.w3.org/TR/WCAG21/#use-of-color)
-
-<ComponentDocs title="<Progress />" component={Progress} />

package/src/components/PromotionCard/PromotionCard.mdx

@@ -1,191 +0,0 @@
-import { ComponentDocs } from '@lighting-beetle/lighter-styleguide';
-import Preview from '../../styleguide/Preview';
-import Image from '../../components/Image';
-
-import PromotionCard, {
-  PromotionCardContent,
-  PromotionCardImageWrapper,
-  PromotionCardSection,
-  PromotionCardTitle,
-} from './';
-import { Button } from '../index';
-import Divider from '../Divider';
-import Pagination from '../Pagination';
-
-import phones from '../../assets/images/developers/phones.png';
-import Grid, { GridCol } from '../Grid';
-
-export const getItems = (count = 10, current = Math.ceil(count / 2)) =>
-  [
-    ...Array(count)
-      .fill('')
-      .map((_, i) => i + 1),
-  ].map(n => ({
-    label: `${n}`,
-    ariaLabel: `Strana ${n}`,
-    href: `/?page=${n}`,
-    ...(current === n ? { isActive: true } : {}),
-  }));
-
-export const label = 'Výber stránok';
-
-export const DefaultPromotionsCard = () => (
-  <PromotionCard>
-    <PromotionCardSection>
-      <PromotionCardContent>
-        <PromotionCardTitle>
-          <h2>Online ochrana pre váš digitálny svet</h2>
-        </PromotionCardTitle>
-        <p className="mb-none">
-          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
-        </p>
-      </PromotionCardContent>
-      <Button href="#">Zistiť viac</Button>
-    </PromotionCardSection>
-    <PromotionCardImageWrapper>
-      <Image src={phones} alt="iPhone image" />
-    </PromotionCardImageWrapper>
-  </PromotionCard>
-);
-
-export const DarkPromotionsCard = () => (
-  <PromotionCard colorScheme="dark">
-    <PromotionCardSection>
-      <PromotionCardContent>
-        <PromotionCardTitle>
-          <h2>Online ochrana pre váš digitálny svet</h2>
-        </PromotionCardTitle>
-        <p className="mb-none">
-          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
-        </p>
-      </PromotionCardContent>
-      <Button href="#">Zistiť viac</Button>
-    </PromotionCardSection>
-    <PromotionCardImageWrapper>
-      <Image src={phones} alt="iPhone image" />
-    </PromotionCardImageWrapper>
-  </PromotionCard>
-);
-
-export const InversePromotionsCard = () => (
-  <PromotionCard colorScheme="dark">
-    <PromotionCardSection isInverse>
-      <PromotionCardContent>
-        <PromotionCardTitle>
-          <h2>Online ochrana pre váš digitálny svet</h2>
-        </PromotionCardTitle>
-        <p className="mb-none">
-          Orange je tu, aby ste mohli používať internet bezpečne a bez obáv.
-        </p>
-      </PromotionCardContent>
-      <Button href="#">Zistiť viac</Button>
-    </PromotionCardSection>
-    <PromotionCardImageWrapper>
-      <Image src={phones} alt="iPhone image" />
-    </PromotionCardImageWrapper>
-  </PromotionCard>
-);
-
-# Promotion card
-
-Karta, ktorá propaguje produkt alebo službu. Komponent Promotion card je adaptáciou [Card komponentu](/components/card).
-
-## Príklady
-
-### Základný
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <DefaultPromotionsCard />
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Tmavý variant
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <DarkPromotionsCard />
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Inverzný variant
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <InversePromotionsCard />
-    </GridCol>
-  </Grid>
-</Preview>
-
-### Viacero kariet
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <DefaultPromotionsCard />
-      <DarkPromotionsCard />
-      <DefaultPromotionsCard />
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Použitie
-
-### Grid
-
-Šírka karty na väčších obrazovkách je obmedzená gridom. Pozri príklad kódu nižšie:
-
-<Preview>
-  <Grid>
-    <GridCol size={{ default: 12, xxl: 8 }}>
-      <p className="mb-small">
-        <b>Nové</b>
-      </p>
-      <Divider
-        thinLine
-        className="pr-none pb-none pl-none pt-none mb-medium mb-md-none"
-      />
-      <DefaultPromotionsCard />
-      <p className="mb-small">
-        <b>Staršie</b>
-      </p>
-      <Divider
-        thinLine
-        className="pr-none pb-none pl-none pt-none mb-medium mb-md-none"
-      />
-      <DarkPromotionsCard />
-      <DefaultPromotionsCard />
-      <InversePromotionsCard />
-      <Pagination label={label} items={getItems(10, 1)} isCompact />
-    </GridCol>
-  </Grid>
-</Preview>
-
-## Props
-
-<ComponentDocs title="<PromotionCard />" component={PromotionCard} />
-
-<ComponentDocs
-  title="<PromotionCardSection />"
-  component={PromotionCardSection}
-/>
-
-<ComponentDocs
-  title="<PromotionCardContent />"
-  component={PromotionCardContent}
-/>
-
-<ComponentDocs
-  title="<PromotionCardTitle />"
-  component={PromotionCardTitle}
-/>
-
-<ComponentDocs
-  title="<PromotionCardImageWrapper />"
-  component={PromotionCardImageWrapper}
-/>