@scality/core-ui 0.115.0

package/stories/common.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import { getThemePropSelector } from '../src/lib/utils';
+const StyledWrapper = styled.div`
+  padding: 3rem;
+  height: 100%;
+  background-color: ${(props) => props.theme.backgroundLevel1};
+  color: ${(props) => props.theme.textPrimary};
+  box-sizing: border-box;
+`;
+const StyledTitle = styled.h3`
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const StyledSubTitle = styled.span`
+  color: ${getThemePropSelector('textPrimary')};
+`;
+const StyledText = styled.text`
+  fill: ${getThemePropSelector('textPrimary')};
+`;
+export const Wrapper = ({ children, className = '', style = {} }) => {
+  return (
+    <StyledWrapper className={className} style={style}>
+      {children}
+    </StyledWrapper>
+  );
+};
+export const Title = ({ children, className = '' }) => {
+  return <StyledTitle className={className}>{children}</StyledTitle>;
+};
+export const SubTitle = ({ children, className = '' }) => {
+  return <StyledSubTitle className={className}>{children}</StyledSubTitle>;
+};
+export const Text = ({ children, className = '', ...rest }) => {
+  return (
+    <StyledText className={className} {...rest}>
+      {children}
+    </StyledText>
+  );
+};

package/stories/constrainedtext.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { ConstrainedText } from '../src/lib/components/constrainedtext/Constrainedtext.component';
+import { Wrapper } from './common';
+import { placementOptions } from './controls';
+export default {
+  title: 'Components/Constrained Text',
+  component: ConstrainedText,
+  decorators: [
+    (story) => (
+      <Wrapper style={{ minHeight: '10vh', padding: '3rem' }}>
+        <div
+          style={{
+            width: '100px',
+            color: '#0F7FFF',
+          }}
+        >
+          {story()}
+        </div>
+      </Wrapper>
+    ),
+  ],
+  argTypes: {
+    tooltipPlacement: {
+      options: placementOptions,
+    },
+  },
+};
+
+export const Default = {
+  args: {
+    text: 'This is a long long phrase',
+    tooltipStyle: { width: '100px' },
+  },
+};
+
+export const CustomizedTooltip = {
+  args: {
+    text: 'This is a long phrase',
+    tooltipStyle: { width: '100px', color: 'lightblue' },
+    tooltipPlacement: 'right',
+  },
+};
+
+export const ConstrainedTextOnMultipleLines = {
+  ...Default,
+  args: {
+    ...Default.args,
+    text: 'This is a really long long phrase that should take 2 lines',
+    lineClamp: 2,
+  },
+};

package/stories/controls.ts

@@ -0,0 +1,59 @@
+import { iconTable } from "../src/lib/components/icon/Icon.component";
+
+export const iconOptions = Object.keys(iconTable);
+
+export const sizesOptions = ['smaller', 'small', 'base', 'large', 'larger'];
+
+export const placementOptions = [
+    'top',
+    'bottom',
+    'left',
+    'top-start',
+    'top-end',
+    'right',
+    'right-start',
+    'right-end',
+    'bottom-end',
+    'bottom-start',
+    'left-start',
+    'left-end',
+  ];
+export const localeArgtype = {
+  control: { type: 'radio' },
+  options: ['en', 'fr'],
+  description: 'Set language for the component',
+};
+
+export const iconArgType = {
+  control: { type: 'select' },
+  options: iconOptions,
+  description: 'Icon to display with the component',
+  table: {
+    type: { summary: 'Element' },
+  },
+};
+
+export const variantsOptions = [
+  'buttonPrimary',
+  'buttonSecondary',
+  'buttonDelete',
+  'backgroundLevel1',
+];
+
+
+export const tooltipArgTypes =  {
+    tooltip: {
+    description:
+      "Object with 'overlay','placement' and 'overlayStyle' properties",
+    control: false,
+  },
+  tooltipOverlay: { control: 'text' },
+  tooltipPlacement: {
+    control: { type: 'select' },
+    options: placementOptions,
+  },
+  tooltipOverlayStyle: {
+    control:'object',
+    description: 'Object of CSS properties',
+  }}
+

package/stories/copybutton.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { CopyButton } from '../src/lib/next';
+import { Wrapper } from './common';
+
+type Story = StoryObj<typeof CopyButton>;
+
+const meta: Meta = {
+  title: 'Components/CopyButton',
+  component: CopyButton,
+  decorators: [
+    (story) => (
+      <Wrapper className="storybook-button" style={{ height: 'auto' }}>
+        {story()}
+      </Wrapper>
+    ),
+  ],
+};
+
+export default meta;
+
+export const CopyButtons: Story = {
+  args: {
+    textToCopy: 'Playground',
+  },
+};
+export const CopyButtonsWithLabel: Story = {
+  ...CopyButtons,
+  args: {
+    ...CopyButtons.args,
+    label: 'Test',
+  },
+};
+
+export const OutlinedCopyButton: Story = {
+  ...CopyButtons,
+  args: {
+    ...CopyButtons.args,
+    variant: 'outline',
+  },
+};
+
+export const OutlinedCopyButtonWithLabel: Story = {
+  ...OutlinedCopyButton,
+  args: {
+    ...OutlinedCopyButton.args,
+    label: 'Test',
+  },
+};
+
+export const OutlinedCopyButtonWithBigLabel: Story = {
+  ...OutlinedCopyButton,
+  args: {
+    ...OutlinedCopyButton.args,
+    label: 'Certificate',
+    textToCopy: 'Certificate',
+  },
+};

package/stories/data/areachart.ts

@@ -0,0 +1,122 @@
+export const area_charts = [
+  {
+    time: '2019-10-01 00:00:00',
+    Average: 'AvgIn',
+    Bandwidth: 1.4,
+  },
+  {
+    time: '2019-10-01 00:00:00',
+    Average: 'AvgOut',
+    Bandwidth: 1.2,
+  },
+  {
+    time: '2019-10-01 00:15:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.8,
+  },
+  {
+    time: '2019-10-01 00:15:00',
+    Average: 'AvgOut',
+    Bandwidth: 1.2,
+  },
+  {
+    time: '2019-10-01 00:30:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.7,
+  },
+  {
+    time: '2019-10-01 00:30:00',
+    Average: 'AvgOut',
+    Bandwidth: 2.1,
+  },
+  {
+    time: '2019-10-01 00:45:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.8,
+  },
+  {
+    time: '2019-10-01 00:45:00',
+    Average: 'AvgOut',
+    Bandwidth: 0.9,
+  },
+  {
+    time: '2019-10-01 01:00:00',
+    Average: 'AvgIn',
+    Bandwidth: 1.3,
+  },
+  {
+    time: '2019-10-01 01:00:00',
+    Average: 'AvgOut',
+    Bandwidth: 0.8,
+  },
+  {
+    time: '2019-10-01 01:15:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.8,
+  },
+  {
+    time: '2019-10-01 01:15:00',
+    Average: 'AvgOut',
+    Bandwidth: 2,
+  },
+  {
+    time: '2019-10-01 01:30:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.7,
+  },
+  {
+    time: '2019-10-01 01:30:00',
+    Average: 'AvgOut',
+    Bandwidth: 0.2,
+  },
+  {
+    time: '2019-10-01 01:45:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.8,
+  },
+  {
+    time: '2019-10-01 01:45:00',
+    Average: 'AvgOut',
+    Bandwidth: 0.9,
+  },
+  {
+    time: '2019-10-01 02:00:00',
+    Average: 'AvgIn',
+    Bandwidth: 1.4,
+  },
+  {
+    time: '2019-10-01 02:00:00',
+    Average: 'AvgOut',
+    Bandwidth: 1.2,
+  },
+  {
+    time: '2019-10-01 02:15:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.8,
+  },
+  {
+    time: '2019-10-01 02:15:00',
+    Average: 'AvgOut',
+    Bandwidth: 1.2,
+  },
+  {
+    time: '2019-10-01 02:30:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.7,
+  },
+  {
+    time: '2019-10-01 02:30:00',
+    Average: 'AvgOut',
+    Bandwidth: 2.1,
+  },
+  {
+    time: '2019-10-01 02:45:00',
+    Average: 'AvgIn',
+    Bandwidth: 0.8,
+  },
+  {
+    time: '2019-10-01 02:45:00',
+    Average: 'AvgOut',
+    Bandwidth: 0.9,
+  },
+];