@eturnity/eturnity_reusable_components 9.22.2 → 9.25.1

package/src/components/sideMenu/sideMenu.stories.js

@@ -0,0 +1,53 @@
+import SideMenu from './index.vue'
+import theme from '@/assets/theme'
+
+const flatMenu = [
+  { key: 'dashboard', label: 'Dashboard', icon: 'House' },
+  { key: 'projects', label: 'Projects', icon: 'House' },
+  { key: 'settings', label: 'Settings', icon: 'House' },
+]
+
+export default {
+  title: 'Components/Navigation/SideMenu',
+  component: SideMenu,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+}
+
+const Template = (args) => ({
+  components: { SideMenu },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="side-menu-story" style="display: flex; min-height: 100vh; background: #f5f5f5;">
+      <aside style="width: 260px; background: white; border-right: 1px solid #e0e0e0;">
+        <SideMenu
+          v-bind="args"
+          @tab-click="() => {}"
+        />
+      </aside>
+      <main style="flex: 1; padding: 24px;">Main content area</main>
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const FlatItems = Template.bind({})
+FlatItems.args = {
+  tabsData: flatMenu,
+  activeTab: 'dashboard',
+  activeParentTab: null,
+  hasLogout: false,
+  appVersion: 'Storybook',
+}
+
+export const SecondActive = Template.bind({})
+SecondActive.args = {
+  ...FlatItems.args,
+  activeTab: 'projects',
+}

package/src/components/spinner/Spinner.stories.js

@@ -2,7 +2,7 @@ import Spinner from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'Spinner',
+  title: 'Components/Spinner/Spinner',
   component: Spinner,
   tags: ['autodocs'],
   argTypes: {

package/src/components/spinnerGif/SpinnerGif.stories.js

@@ -2,7 +2,7 @@ import SpinnerGif from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'SpinnerGif',
+  title: 'Components/SpinnerGif/SpinnerGif',
   component: SpinnerGif,
   tags: ['autodocs'],
   argTypes: {

package/src/components/statusIndicator/statusIndicator.stories.js

@@ -0,0 +1,101 @@
+import StatusIndicator from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/StatusIndicator/StatusIndicator',
+  component: StatusIndicator,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isDirty: { control: 'boolean', description: 'User has interacted' },
+    isActive: { control: 'boolean', description: 'Focused / active step' },
+    isError: { control: 'boolean' },
+    isWarning: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    size: { control: 'text' },
+    borderRadius: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { StatusIndicator },
+  setup() {
+    return { args }
+  },
+  template: `
+    <StatusIndicator v-bind="args">
+      {{ args.slotNumber }}
+    </StatusIndicator>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const NeutralNotDirty = Template.bind({})
+NeutralNotDirty.args = {
+  isDirty: false,
+  isActive: false,
+  isError: false,
+  isWarning: false,
+  isDisabled: false,
+  size: '28px',
+  slotNumber: '1',
+}
+
+export const ActiveInProgress = Template.bind({})
+ActiveInProgress.args = {
+  isDirty: false,
+  isActive: true,
+  isError: false,
+  isWarning: false,
+  isDisabled: false,
+  size: '28px',
+  slotNumber: '2',
+}
+
+export const ValidComplete = Template.bind({})
+ValidComplete.args = {
+  isDirty: true,
+  isActive: false,
+  isError: false,
+  isWarning: false,
+  isDisabled: false,
+  size: '28px',
+  slotNumber: '',
+}
+
+export const ErrorState = Template.bind({})
+ErrorState.args = {
+  isDirty: true,
+  isActive: false,
+  isError: true,
+  isWarning: false,
+  isDisabled: false,
+  size: '28px',
+  slotNumber: '',
+}
+
+export const WarningState = Template.bind({})
+WarningState.args = {
+  isDirty: true,
+  isActive: false,
+  isError: false,
+  isWarning: true,
+  isDisabled: false,
+  size: '28px',
+  slotNumber: '',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  isDirty: true,
+  isActive: false,
+  isError: false,
+  isWarning: false,
+  isDisabled: true,
+  size: '28px',
+  slotNumber: '4',
+}

package/src/components/tableDropdown/TableDropdown.stories.js

@@ -2,7 +2,7 @@ import TableDropdown from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'Components/TableDropdown',
+  title: 'Components/TableDropdown/TableDropdown',
   component: TableDropdown,
   tags: ['autodocs'],
   argTypes: {

package/src/components/tables/viewTable/viewTable.stories.js

@@ -0,0 +1,85 @@
+import ViewTable from './index.vue'
+import theme from '@/assets/theme'
+
+const headerItems = [
+  { value: 'Site' },
+  { value: 'Capacity' },
+  { value: 'Status' },
+]
+
+const tableItems = [
+  [
+    { value: 'Zürich HQ' },
+    { value: '450 kWp' },
+    { value: 'Live' },
+  ],
+  [
+    { value: 'Bern depot' },
+    { value: '120 kWp' },
+    { value: 'Planning' },
+  ],
+]
+
+export default {
+  title: 'Components/Tables/ViewTable',
+  component: ViewTable,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    tableTitle: { control: 'text' },
+    fullWidth: { control: 'boolean' },
+    showDeleteButton: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    emptyText: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { ViewTable },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="view-table-story">
+      <ViewTable v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const WithData = Template.bind({})
+WithData.args = {
+  headerItems,
+  tableItems,
+  tableTitle: 'Installed assets',
+  fullWidth: true,
+  showDeleteButton: false,
+  isLoading: false,
+}
+
+export const WithDeleteColumn = Template.bind({})
+WithDeleteColumn.args = {
+  ...WithData.args,
+  showDeleteButton: true,
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  headerItems,
+  tableItems: [],
+  tableTitle: 'Refreshing…',
+  isLoading: true,
+}
+
+export const Empty = Template.bind({})
+Empty.args = {
+  headerItems,
+  tableItems: [],
+  tableTitle: 'No matches',
+  emptyText: 'Adjust filters or clear search to see sites.',
+  isLoading: false,
+}

package/src/components/tabsHeader/TabsHeader.stories.js

@@ -2,7 +2,7 @@ import TabsHeader from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'TabsHeader',
+  title: 'Components/TabsHeader/TabsHeader',
   component: TabsHeader,
   tags: ['autodocs'],
   argTypes: {

package/src/components/tag/conversionTag/conversionTag.stories.js

@@ -0,0 +1,47 @@
+import ConversionTag from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Tag/ConversionTag',
+  component: ConversionTag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    text: { control: 'text' },
+    isUpperCase: { control: 'boolean' },
+    dataId: { control: 'text' },
+    dataQaId: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { ConversionTag },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="conversion-tag-story" style="padding: 16px;">
+      <ConversionTag v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  text: 'PRO',
+  isUpperCase: true,
+  dataId: 'conversion_tag',
+  dataQaId: 'conversion_tag',
+}
+
+export const MixedCaseLabel = Template.bind({})
+MixedCaseLabel.args = {
+  ...Default.args,
+  text: 'Beta',
+  isUpperCase: false,
+}

package/src/components/tag/conversionTag/index.vue

@@ -29,7 +29,7 @@
 
   const TextContainer = styled.div`
     font-size: 10px;
-    font-weight: 700;
+    font-weight: 500;
     color: ${(props) => props.theme.semanticColors.teal[800]};
   `
 

package/src/components/tag/freeTrialTag/freeTrialTag.stories.js

@@ -0,0 +1,42 @@
+import FreeTrialTag from './index.vue'
+import theme from '@/assets/theme'
+
+export default {
+  title: 'Components/Tag/FreeTrialTag',
+  component: FreeTrialTag,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    text: {
+      control: 'text',
+      description: 'Overrides default translated “free trial” label when set',
+    },
+  },
+}
+
+const Template = (args) => ({
+  components: { FreeTrialTag },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="free-trial-tag-story" style="padding: 16px;">
+      <FreeTrialTag v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  text: '',
+}
+
+export const CustomLabel = Template.bind({})
+CustomLabel.args = {
+  text: '14-day trial',
+}

package/src/components/threeDots/index.vue

@@ -152,6 +152,7 @@
     hoveredBackgroundColor: String,
   }
   const PageContainer = styled('div', PageContainerAttrs)`
+    position: relative;
     display: grid;
     align-items: center;
     justify-items: center;
@@ -395,10 +396,26 @@
         }
       },
       setContextMenuPosition() {
-        const contextMenu = this.$refs.dropdownContainer.$el
-        const button = this.$refs.pageContainer.$el
+        const dropdownRef = this.$refs.dropdownContainer
+        const pageRef = this.$refs.pageContainer
+        const contextMenu = dropdownRef?.$el ?? dropdownRef
+        const button = pageRef?.$el ?? pageRef
+        if (
+          !contextMenu ||
+          !button ||
+          typeof button.getBoundingClientRect !== 'function'
+        ) {
+          return
+        }
         const rectButton = button.getBoundingClientRect()
-        const relativeParent = this.findRelativeParent(contextMenu)
+        const relativeParent =
+          this.findRelativeParent(contextMenu) || document.documentElement
+        if (
+          !relativeParent ||
+          typeof relativeParent.getBoundingClientRect !== 'function'
+        ) {
+          return
+        }
         const rectRelativeParent = relativeParent.getBoundingClientRect()
 
         const positionArray = this.determineElementQuarter(button, rectButton)

package/src/components/threeDots/threeDots.stories.js

@@ -0,0 +1,59 @@
+import ThreeDots from './index.vue'
+import theme from '@/assets/theme'
+
+const basicOptions = [
+  { value: 'edit', name: 'Edit' },
+  { value: 'duplicate', name: 'Duplicate' },
+  { value: 'delete', name: 'Delete' },
+]
+
+export default {
+  title: 'Components/ThreeDots/ThreeDots',
+  component: ThreeDots,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    isLoading: { control: 'boolean' },
+    textWrap: { control: 'boolean' },
+    colorTheme: { control: 'select', options: ['light', 'dark'] },
+    iconColor: { control: 'text' },
+    rowIndex: { control: 'number' },
+    dataId: { control: 'text' },
+    dataQaId: { control: 'text' },
+  },
+}
+
+const Template = (args) => ({
+  components: { ThreeDots },
+  setup() {
+    return { args }
+  },
+  template: `
+    <div data-test-id="three-dots-story" style="padding: 40px; display: flex; justify-content: flex-end;">
+      <ThreeDots v-bind="args" />
+    </div>
+  `,
+  provide: {
+    theme,
+  },
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  options: basicOptions,
+  isLoading: false,
+  textWrap: true,
+  colorTheme: 'light',
+  iconColor: '#263238',
+  rowIndex: 0,
+  dataId: 'row_actions',
+  dataQaId: 'row_actions',
+}
+
+export const Loading = Template.bind({})
+Loading.args = {
+  ...Default.args,
+  isLoading: true,
+}

package/src/components/videoThumbnail/videoThumbnail.stories.js

@@ -2,7 +2,7 @@ import VideoThumbnail from './index.vue'
 import theme from '@/assets/theme'
 
 export default {
-  title: 'VideoThumbnail',
+  title: 'Components/VideoThumbnail/VideoThumbnail',
   component: VideoThumbnail,
   tags: ['autodocs'],
   argTypes: {

package/src/constants/colorPalettes.js

@@ -0,0 +1,71 @@
+import theme from '@/assets/theme.js'
+
+/** Fully transparent fill (used with cross icon in ColorSelector). */
+export const TRANSPARENT_COLOR = '#ffffff00'
+
+export const THEME_COLORS = [
+  theme.colors.black,
+  theme.colors.grey1,
+  theme.colors.blue,
+  theme.colors.red,
+  theme.colors.green,
+  theme.colors.yellow,
+]
+
+/** Shared palette for blueprint arrows and 3D roof plan items. */
+export const DRAWING_ITEM_COLORS = [
+  theme.semanticColors.red[400],
+  theme.semanticColors.red[600],
+  theme.semanticColors.blue[400],
+  theme.semanticColors.blue[600],
+  theme.semanticColors.green[400],
+  theme.semanticColors.green[600],
+  theme.semanticColors.purple[400],
+  theme.semanticColors.purple[600],
+  theme.semanticColors.yellow[400],
+  theme.semanticColors.yellow[600],
+  theme.semanticColors.teal[400],
+  theme.semanticColors.grey[400],
+  theme.colors.black,
+  theme.colors.white,
+]
+
+export const ARROW_COLORS = DRAWING_ITEM_COLORS
+
+export const ROOF_PLAN_ITEM_COLORS = DRAWING_ITEM_COLORS
+
+export const PANEL_FILL_COLORS = [
+  TRANSPARENT_COLOR,
+  theme.semanticColors.red[400],
+  theme.semanticColors.red[600],
+  theme.semanticColors.blue[400],
+  theme.semanticColors.blue[600],
+  theme.semanticColors.green[400],
+  theme.semanticColors.green[600],
+  theme.semanticColors.purple[400],
+  theme.semanticColors.purple[600],
+  theme.semanticColors.yellow[400],
+  theme.semanticColors.yellow[600],
+  theme.semanticColors.teal[400],
+  theme.semanticColors.grey[400],
+  theme.colors.black,
+  theme.colors.white,
+]
+
+export const PANEL_STROKE_COLORS = [
+  TRANSPARENT_COLOR,
+  theme.semanticColors.red[400],
+  theme.semanticColors.red[600],
+  theme.semanticColors.blue[400],
+  theme.semanticColors.blue[600],
+  theme.semanticColors.green[400],
+  theme.semanticColors.green[600],
+  theme.semanticColors.purple[400],
+  theme.semanticColors.purple[600],
+  theme.semanticColors.yellow[400],
+  theme.semanticColors.yellow[600],
+  theme.semanticColors.teal[400],
+  theme.semanticColors.grey[400],
+  theme.colors.black,
+  theme.colors.white,
+]