@eeacms/volto-eea-design-system 0.9.5 → 1.0.0-alpha.2

package/src/ui/Statistic/Statistic.stories.js

@@ -0,0 +1,464 @@
+import React from 'react';
+import { Statistic, Container, Button } from 'semantic-ui-react';
+import CountUp, { useCountUp } from 'react-countup';
+
+export default {
+  title: 'Components/Statistic',
+  component: Statistic,
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['mini', 'tiny', 'small', 'large', 'huge'],
+      },
+      description: 'statistic size',
+      table: {
+        type: {
+          summary: 'string',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+    horizontal: {
+      description: 'present its measurement horizontally',
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    backgroundVariant: {
+      name: 'Background when inverted',
+      options: ['primary', 'secondary', 'tertiary'],
+      description: 'Updates the background color',
+      control: { type: 'select' },
+      defaultValue: 'tertiary',
+      table: {
+        defaultValue: { summary: 'tertiary' },
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+const Template = (args) => (
+  <div
+    className={`full-width color-bg-${
+      args.inverted ? args.backgroundVariant : ''
+    }`}
+  >
+    <Container>
+      <Statistic.Group {...args}>
+        {args.elements &&
+          args.elements.map((element, index) => (
+            <Statistic
+              as="a"
+              href={element.href}
+              key={index}
+              {...element}
+            ></Statistic>
+          ))}
+        {!args.elements && (
+          <>
+            {args.linked ? (
+              <Statistic as="a" href="/#" {...args}></Statistic>
+            ) : (
+              <Statistic {...args}></Statistic>
+            )}{' '}
+          </>
+        )}
+      </Statistic.Group>
+    </Container>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Statistic Label',
+  value: 'Value',
+  size: 'small',
+  horizontal: false,
+  linked: false,
+  inverted: false,
+  backgroundVariant: 'primary',
+};
+
+Default.argTypes = {
+  label: {
+    description: 'label content of the Statistic',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  value: {
+    description: 'value content of the statistic',
+    table: {
+      type: {
+        summary: 'custom',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  linked: {
+    description: 'Add link to statistic',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+};
+
+export const Group = Template.bind({});
+Group.args = {
+  elements: [
+    {
+      ...Default.args,
+      label:
+        'Premature deaths were attributed to chronic exposure to fine particulate matter',
+      value: '307,000',
+    },
+    {
+      ...Default.args,
+      label:
+        'Premature deaths were attributed to chronic nitrogen dioxide exposure',
+      value: '40,400',
+      href: '/#',
+    },
+    {
+      ...Default.args,
+      label: 'Premature deaths were attributed to acute ozone exposure',
+      value: '16,800',
+      href: '/#',
+    },
+  ],
+  widths: 'three',
+  size: 'small',
+  horizontal: false,
+  inverted: false,
+  backgroundVariant: 'primary',
+};
+
+Group.argTypes = {
+  elements: {
+    description: 'array of different statistics',
+    table: {
+      type: {
+        summary: 'object',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  widths: {
+    control: {
+      type: 'select',
+      options: ['one', 'two', 'three', 'four', 'five'],
+    },
+    description: 'statistic column size',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+};
+
+const CustomTemplate = (args) => (
+  <div
+    className={`full-width color-bg-${
+      args.inverted ? args.backgroundVariant : ''
+    }`}
+  >
+    <Container>
+      <Statistic.Group {...args}>
+        {args.elements &&
+          args.elements.map((element, index) => (
+            <a href={element.href} className="ui small statistic">
+              <div className={`value ${args.valueVariation}`}>
+                {element.value}
+              </div>
+              <div className={`label ${args.labelVariation}`}>
+                {element.label}
+              </div>
+              <div className={`slate text-center ${args.extraVariation}`}>
+                {element.slate}
+              </div>
+            </a>
+          ))}
+      </Statistic.Group>
+    </Container>
+  </div>
+);
+export const Custom = CustomTemplate.bind({});
+Custom.args = {
+  elements: [
+    {
+      ...Default.args,
+      label: 'label 1',
+      value: '50',
+      slate: 'Text from slate',
+      href: '/#',
+    },
+    {
+      ...Default.args,
+      label: 'label 2',
+      value: '500',
+      slate: 'Text from slate',
+      href: '/#',
+    },
+    {
+      ...Default.args,
+      label: 'label 3',
+      value: '5000',
+      slate: 'Text from slate',
+      href: '/#',
+    },
+  ],
+  widths: 'three',
+  horizontal: false,
+  size: 'small',
+  valueVariation: 'secondary',
+  labelVariation: 'tertiary',
+  extraVariation: 'tertiary',
+  inverted: false,
+  backgroundVariant: 'primary',
+};
+Custom.argTypes = {
+  widths: {
+    control: {
+      type: 'select',
+      options: ['one', 'two', 'three', 'four', 'five'],
+    },
+    description: 'statistic column size',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  valueVariation: {
+    name: 'Value variation',
+    defaultValue: 'tertiary',
+    options: ['primary', 'secondary', 'tertiary'],
+    control: { type: 'select' },
+    description: 'Text color variation',
+    table: {
+      category: 'Color variations',
+      defaultValue: { summary: 'tertiary' },
+      type: { summary: 'string' },
+    },
+  },
+  labelVariation: {
+    name: 'Value variation',
+    defaultValue: 'tertiary',
+    options: ['primary', 'secondary', 'tertiary'],
+    control: { type: 'select' },
+    description: 'Text color variation',
+    table: {
+      category: 'Color variations',
+      defaultValue: { summary: 'tertiary' },
+      type: { summary: 'string' },
+    },
+  },
+  extraVariation: {
+    name: 'Extra info variation',
+    defaultValue: 'tertiary',
+    options: ['primary', 'secondary', 'tertiary'],
+    control: { type: 'select' },
+    description: 'Text color variation',
+    table: {
+      category: 'Color variations',
+      defaultValue: { summary: 'tertiary' },
+      type: { summary: 'string' },
+    },
+  },
+};
+
+////////////////////////////////// Animation Stories
+
+const AnimationTemplate = (args) => {
+  const { start, reset, pauseResume } = useCountUp({
+    ref: 'counter',
+    start: args.start,
+    end: args.end,
+    delay: args.delay,
+    duration: args.duration,
+    decimals: args.decimals,
+    decimal: args.decimal,
+    prefix: args.prefix,
+    suffix: args.suffix,
+  });
+
+  return (
+    <Container>
+      <Statistic.Group {...args}>
+        <a href="/#" className="ui small statistic">
+          <div className="value secondary" id="counter"></div>
+          <div className="label tertiary">Count up label</div>
+        </a>
+      </Statistic.Group>
+      <br />
+      <Button secondary onClick={start}>
+        Start
+      </Button>
+      <Button primary onClick={reset}>
+        Reset
+      </Button>
+      <Button primary inverted onClick={pauseResume}>
+        Pause/Resume
+      </Button>
+    </Container>
+  );
+};
+
+export const Animation = AnimationTemplate.bind({});
+Animation.args = {
+  start: 0,
+  end: 5000,
+  delay: 0,
+  duration: 5,
+  decimals: 0,
+  prefix: '',
+  suffix: '',
+  decimal: '.',
+  size: 'small',
+  horizontal: false,
+};
+Animation.parameters = { controls: { exclude: ['Background when inverted'] } };
+
+const CountupStatistics = (args) => (
+  <div
+    className={`full-width color-bg-${
+      args.inverted ? args.backgroundVariant : ''
+    }`}
+  >
+    <Container>
+      <Statistic.Group id="counter" {...args}>
+        {args.elements &&
+          args.elements.map((element, index) => (
+            <a href={element.href} className="ui small statistic">
+              <div className={`value ${args.valueVariation}`}>
+                <CountUp end={element.value} />
+              </div>
+              <div className={`label ${args.labelVariation}`}>
+                {element.label}
+              </div>
+              <div className={`slate text-center ${args.extraVariation}`}>
+                {element.slate}
+              </div>
+            </a>
+          ))}
+      </Statistic.Group>
+    </Container>
+  </div>
+);
+export const AnimationGroup = CountupStatistics.bind({});
+AnimationGroup.args = {
+  elements: [
+    {
+      ...Default.args,
+      label: 'label 1',
+      value: '50',
+      slate: 'Text from slate',
+      href: '/#',
+    },
+    {
+      ...Default.args,
+      label: 'label 2',
+      value: '500',
+      slate: 'Text from slate',
+      href: '/#',
+    },
+    {
+      ...Default.args,
+      label: 'label 3',
+      value: '5000',
+      slate: 'Text from slate',
+      href: '/#',
+    },
+  ],
+  widths: 'three',
+  size: 'small',
+  horizontal: false,
+  valueVariation: 'secondary',
+  labelVariation: 'tertiary',
+  extraVariation: 'tertiary',
+  inverted: false,
+  backgroundVariant: 'primary',
+};
+AnimationGroup.argTypes = {
+  widths: {
+    control: {
+      type: 'select',
+      options: ['one', 'two', 'three', 'four', 'five'],
+    },
+    description: 'statistic column size',
+    table: {
+      type: {
+        summary: 'string',
+      },
+      defaultValue: {
+        summary: ' "" ',
+      },
+    },
+  },
+  valueVariation: {
+    name: 'Value variation',
+    defaultValue: 'tertiary',
+    options: ['primary', 'secondary', 'tertiary'],
+    control: { type: 'select' },
+    description: 'Text color variation',
+    table: {
+      category: 'Color variations',
+      defaultValue: { summary: 'tertiary' },
+      type: { summary: 'string' },
+    },
+  },
+  labelVariation: {
+    name: 'Value variation',
+    defaultValue: 'tertiary',
+    options: ['primary', 'secondary', 'tertiary'],
+    control: { type: 'select' },
+    description: 'Text color variation',
+    table: {
+      category: 'Color variations',
+      defaultValue: { summary: 'tertiary' },
+      type: { summary: 'string' },
+    },
+  },
+  extraVariation: {
+    name: 'Extra info variation',
+    defaultValue: 'tertiary',
+    options: ['primary', 'secondary', 'tertiary'],
+    control: { type: 'select' },
+    description: 'Text color variation',
+    table: {
+      category: 'Color variations',
+      defaultValue: { summary: 'tertiary' },
+      type: { summary: 'string' },
+    },
+  },
+};

package/src/ui/Tab/Tab.stories.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import { Tab, Container } from 'semantic-ui-react';
+
+export default {
+  title: 'Components/Tab',
+  component: Tab,
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    panes: {
+      description: 'tab names and content array',
+      table: {
+        type: {
+          summary: 'object',
+        },
+        defaultValue: {
+          summary: ' "" ',
+        },
+      },
+    },
+  },
+};
+
+function TabContent({
+  panes,
+  renderActive,
+  text,
+  attached,
+  borderless,
+  vertical,
+  fluid,
+  grid,
+}) {
+  return (
+    <Tab
+      panes={panes}
+      renderActiveOnly={renderActive}
+      menu={{
+        secondary: true,
+        pointing: true,
+        vertical: vertical,
+        fluid: fluid,
+        tabIndex: 0,
+      }}
+      grid={grid}
+    ></Tab>
+  );
+}
+
+const Template = (args) => (
+  <Container>
+    <TabContent {...args}></TabContent>
+  </Container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  renderActive: false,
+  panes: [
+    {
+      menuItem: 'Tab 1',
+      pane: 'Tab 1 Content',
+    },
+    {
+      menuItem: 'Tab 2',
+      pane: 'Tab 2 Content',
+    },
+    {
+      menuItem: 'Tab 3',
+      pane: 'Tab 3 Content',
+    },
+    {
+      menuItem: 'Tab 4',
+      pane: 'Tab 4 Content',
+    },
+  ],
+};
+
+export const Vertical = Template.bind({});
+Vertical.args = {
+  renderActive: true,
+  vertical: true,
+  fluid: true,
+  grid: { paneWidth: 7, tabWidth: 5 },
+  panes: [
+    {
+      menuItem: 'Ground level ozone',
+      render: () => (
+        <Tab.Pane>
+          {' '}
+          is not directly emitted into the atmosphere. Instead, it forms in the
+          atmosphere from a chain of chemical reactions following emissions of
+          certain precursor gases: NOX, carbon monoxide (CO) and NMVOCs and
+          methane (CH4).{' '}
+          <img
+            src="https://www.eea.europa.eu/signals/signals-2013/infographics/sources-of-air-pollution-in-europe"
+            alt="sources of air pollution"
+          />{' '}
+          Ground-level ozone is formed from chemical reactions in the presence
+          of sunlight, following emissions of precursor gases, mainly NOX,
+          NMVOCs, CO and CH4.
+        </Tab.Pane>
+      ),
+    },
+    {
+      menuItem: 'Nitrogen oxides',
+      render: () => (
+        <Tab.Pane>
+          {' '}
+          are emitted during fuel combustion from industrial facilities and the
+          road transport sector. NOX is a group of gases comprising nitrogen
+          monoxide (NO) and nitrogen dioxide (NO2). NO makes up the majority of
+          NOX emissions. NOX contributes to the formation of ozone and
+          particulate matter.
+        </Tab.Pane>
+      ),
+    },
+    {
+      menuItem: 'Particulate matter',
+      render: () => (
+        <Tab.Pane>
+          {' '}
+          is a mixture of aerosol particles (solid and liquid) covering a wide
+          range of sizes and chemical compositions. PM is either directly
+          emitted as primary particles or it forms in the atmosphere from
+          emissions of certain precursor pollutants such as SO2, NOX, NH3 and
+          NMVOCs. PM is emitted from many anthropogenic sources, including both
+          combustion and non-combustion sources. Natural emissions of PM also
+          occur, including from sea salt and windblown Saharan dust.
+        </Tab.Pane>
+      ),
+    },
+    {
+      menuItem: 'Sulphur dioxide',
+      render: () => (
+        <Tab.Pane>
+          {' '}
+          is formed and emitted by combustion of fossil fuels (mainly coal and
+          oil) primarily for electricity generation. High concentrations of SO2
+          are associated with multiple health and environmental effects. The
+          highest concentrations of SO2 have been recorded in the vicinity of
+          large industrial facilities. SO2 emissions are an important
+          environmental issue because they are a major precursor to ambient
+          PM2.5 concentrations.
+        </Tab.Pane>
+      ),
+    },
+    {
+      menuItem: 'Benzopyrene',
+      render: () => (
+        <Tab.Pane>
+          {' '}
+          is a polycyclic aromatic hydrocarbon (PAH) found in fine PM. Its
+          origin is the incomplete combustion of various fuels. The main sources
+          of BaP in Europe are domestic home-heating, in particular wood- and
+          coal-burning, waste-burning, coke and steel production, and road
+          traffic. Other sources include outdoor fires.
+        </Tab.Pane>
+      ),
+    },
+  ],
+};
+
+Vertical.argTypes = {
+  vertical: {
+    description: 'vertical tab',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+  fluid: {
+    description: 'fluid tabs',
+    table: {
+      type: {
+        summary: 'boolean',
+      },
+      defaultValue: {
+        summary: false,
+      },
+    },
+  },
+  grid: {
+    description:
+      'Shorthand props for the Grid. Only applicable to vertical menus',
+    table: {
+      type: {
+        summary: 'object',
+      },
+      defaultValue: {
+        summary: '{ paneWidth: 12, tabWidth: 4 }',
+      },
+    },
+  },
+};